<template>
	<view>
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					商品类别
				</view>
				<view class="acea-row row-middle row-right item-r">
					<picker @change="bindPickerChange" :value="index" :range="itemList" range-key="name">
						<input class="input-r" type="text" placeholder="请输入商品类别" placeholder-class="placeholder-class"
							v-model="dataForm.categoryName" name="categoryName" disabled />
					</picker>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					商品名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入商品名称" placeholder-class="placeholder-class"
						v-model="dataForm.commodityName" name='commodityName' />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					商品数量
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="请输入商品数量" placeholder-class="placeholder-class"
						v-model="dataForm.commodityNum" name='commodityNum' />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					计量单位
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" style="width: 400rpx;"
					@click="unitShow= true">
					<view :class="dataForm.unitName?'':'no-data-r'">
						{{dataForm.unitName?dataForm.unitName:'请选择计量单位'}}
					</view>
				</view>

			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">商品价格</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="实例:30" v-model="dataForm.commodityPrice" placeholder-class="placeholder-class"
							name='commodityPrice'>
						<text>元</text>
					</view>
				</view>
			</view>

			<view class="uni-form-item uni-column" style="padding-top: 20rpx;">
				<chooseKeywords title="服务特色" :advantages="advantages" type="6" :typeOn="typeOn"
					:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
					@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
					@advantages="val=>(advantages=val)"  @inited="chooseKeywordsInited"/>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					服务区域
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" style="width: 400rpx;">
					<view :class="dataForm.serviceArea?'':'no-data-r'" @click="goServiceArea">
						{{dataForm.serviceAreaName?dataForm.serviceAreaName:'请选择服务区域'}}
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					交易地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择交易地址" v-model="dataForm.address" name='address' placeholder-class="placeholder-class">
					<image src="../../static/images/location.png" mode="" @click="clickMap"></image>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="addContact">
					<image src="../../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="item border-b">
				<chooseContact :list="contactList" :dataform="dataForm" @add="d=>contactList.push(d)" @del="toDel" />
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					标题
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
						v-model="dataForm.title" name='title' />
				</view>
			</view>
			<!-- 描述 -->
			<view class="module">
				<view class="module-title">
					描述
				</view>
				<view class="textacea-box">
					<textarea placeholder="请填写描述" v-model="dataForm.details" :maxlength="maxLength"
						name='details'></textarea>
					<view class="num-text">
						{{dataForm.details.length}}/{{maxLength}}
					</view>
				</view>
			</view>
			<!-- 上传照片/视频 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title">
						上传照片/视频
					</view>
					<view class="example-text">
						图片示例
					</view>
				</view>
				<view class="example-text-l">
					请至少添加一张照片，图片越多审核越快
				</view>
				<view class="acea-row pictrue-list">
					<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in dataForm.imaegs"
						:key="item.url">
						<image style="width: 218rpx;height: 172rpx;" :src="item.url" mode="" v-if="item.type=='image'">
						</image>
						<video style="width: 218rpx;height: 172rpx;" :src="item.url" mode="" v-else></video>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg"
						v-if="dataForm. imaegs.length < 10">
						<view class="upload-icon">
							<image src="../../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加照片/视频</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submitMeth">完成</view>
		<view class="uni-p-b-98"></view>
		<serviceArea ref="serviceArea" @area="handleArea" />
		<u-popup :show="popupShow" mode="center">
			<view style="width: 90vw;" :style="{height: '480rpx'}" class="padding20">
				<view class="acea-row row-middle row-between">
					<view class="title padding20">选择服务特色</view>
					<view @click="popupShow = false"><u-icon name="close" size="20"></u-icon></view>
				</view>
				<view class="list">
					<view class="module">
						<view class="textacea-box">
							<textarea placeholder="请输入标签" v-model="supplementText" :maxlength="maxLength"></textarea>
							<view class="num-text">
								{{supplementText.length}}/{{maxLength}}
							</view>
						</view>
					</view>
					<u-button type="error" text="确定添加" class="mt20" @click="addConfirm"></u-button>
				</view>
			</view>
		</u-popup>

		<u-picker :show="unitShow" :columns="dwList" keyName="name" @confirm="unitConfirm"
			@cancel="unitShow = false"></u-picker>
	</view>

</template>

<script>
	import {
		SupplyList
	} from '@/api/supplyChain.js'

	import {
		dictionary
	} from "@/api/subletOfShop.js"
	import serviceArea from '../../components/area.vue';
	import chooseContact from '../../components/chooseContact.vue'
	import {
		addSupple,
		getSuppleDetail,
		editSupple
	} from '@/api/api.js'
	import chooseKeywords from '../../components/chooseKeywords.vue'
	export default {
		components: {
			serviceArea,
			chooseKeywords,
			chooseContact
		},
		props:{
			editId:{
				type: [String,Number],
				default: ''
			},
			itemList:{
				type: Array,
				default: []
			}
		},
		data() {
			return {
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				unitShow: false,
				typeOn: 1,
				categoryOn: 0,
				dwList: [],
				advantages: [],
				contactList: [],
				title: '',
				tabLeft: 0,
				dataform: {},
				maxLength: 200,
				index: 0,
				storeAdvantage: [],
				popupShow: false,
				supplementText: '',
				advantageIds: [],
				inited: 0,
				dataForm: {
					category: '', //商品类别
					categoryName: '', //商品类别名称
					commodityName: '', //商品名称
					commodityNum: '', //商品数量
					commodityPrice: '', //商品价格
					serviceCharacteristics: '', //服务特色
					serviceArea: '', //服务区域
					serviceAreaName:'',
					address: '', //交易地址
					imaegs: [],
					details: '', //描述
					title: '', //标题
					longitude: '',
					latitude: ''
				},
				rules: [{
					filed: 'category',
					tip: '请选择商品类别'
				}, {
					filed: 'commodityName',
					tip: '请输入商家名称'
				}, {
					filed: 'commodityNum',
					tip: '请输入商品数量'
				}, {
					filed: 'commodityPrice',
					tip: '请输入商品价格'
				}, {
					filed: 'serviceArea',
					tip: '请选择服务区域'
				}, {
					filed: 'contacts',
					tip: '请添加联系人'
				}, {
					filed: 'title',
					tip: '请输入标题'
				}]
			};
		},
		mounted() {
			let that = this;
			//先默认赋予当前
			this.dataForm.city = this.$cityCode ? this.$cityCode[1] : '';
			this.dataForm.province = this.$cityCode ? this.$cityCode[0] : '';
			this.dataForm.district = this.$cityCode ? this.$cityCode[2] : '';
			that.dataForm.address = that.$address;
		
			that.$set(that.dataForm, 'latitude', this.$location.latitude)
			that.$set(that.dataForm, 'longitude', this.$location.longitude)
			uni.$on('contact', function(data) {
				data.identity = data.type;
				that.contactList.push(data)
			})
			uni.$on('initContact', function(data) {
				if (that.contactList.length < 1) {
					that.contactList.push(data)
				}
			})
			getApp().globalData.initContact();
			this.getDictionary();
		},
		watch:{
			editId:{
				handler(){
					console.log("当前编辑id",this.editId)
					if(this.editId){
						this.getDetail(this.editId)
					}
				},
				immediate: true
			}
		},
		methods: {
			//去选择服务区域
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			chooseKeywordsInited(){
				let that = this;
				this.dataForm.serviceCharacteristics && this.dataForm.serviceCharacteristics.split('/').forEach((item, index) => {
						if (this.advantages) {
							let ind = that.advantages.indexOf(item);
							if (ind == -1) {
								that.advantages.push(item)
								that.storeAdvantage.push(item)
								that.advantageIds.push(that.advantages.length - 1)
							} else {
								that.advantageIds.push(ind)
								that.storeAdvantage.push(that.advantages[ind])
							}
						}
					})
			},
			getDictionary() {
				dictionary({
					gids: '43'
				}).then(res => {
					uni.hideLoading()
					this.dwList = [res.data['43']];
					console.log('dwList', this.dwList);
				})
			},
			//意向城市
			handleArea(areaInfo) {
				if(this.editId&&this.inited==0){
					this.inited++;
					return;
				}
				console.log('areaInfo', areaInfo)
				if (areaInfo.regionName.split(',').length > 3) {
					this.$util.Tips({
						title: "最多选择三个"
					})
					// this.dataForm.serviceArea = ""
					return;
				}
				this.dataForm.serviceArea = areaInfo.districtIds
				this.dataForm.serviceAreaName = areaInfo.regionName
				console.log('dataForm', this.dataForm)
			},
			addConfirm() {
				this.popupShow = false;
				let that = this;
				that.advantages.push(that.supplementText);
				that.supplementText = '';
			},
			//上传照片
			uploadImg() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//选择照片
			chooseImages() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.dataForm.imaegs.push({
						url: res.data.url,
						type: 'image'
					})
				});
			},
			//选择视频
			chooseVideo() {
				let that = this;
				that.$util.uploadVideo({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					console.log(res)
					that.dataForm.imaegs.push({
						url: res.data.url,
						type: 'video'
					})
				});

			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			advantageChecked(item) {
				if (this.advantageIds.indexOf(item) != -1) {
					let idx = this.advantageIds.indexOf(item);
					this.advantageIds.splice(idx, 1);
				} else {
					this.advantageIds.push(item);
				}
			},
			openChange(row, index) {
				row.open = index
			},
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			clickMap(success) {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.dataForm.address = res.address + res.name
						this.dataForm.latitude = res.latitude
						this.dataForm.longitude = res.longitude
						
						this.getBusiness({
							longitude: res.longitude,
							latitude: res.latitude,
						})
					},
				})
			},
			getBusiness(location) {
				let that = this;
				getApp().globalData.getBusinessList(location).then(res => {
					if (res.code == 200) {
						console.log('res',res)
						that.dataForm.province = res.data.province;
						that.dataForm.city = res.data.city;
						that.dataForm.district = res.data.district;
						that.dataForm.businessName = res.data.businessName;
						that.dataForm.businessCircle = res.data.businessId;
					}
				});
			},
			typeNavClick(item, index) {
				// let title = '发布-'+this.categoryList[this.categoryOn].name+item.name
				// let title = '发布-'+item.name
				// uni.setNavigationBarTitle({
				// 	title:title
				// })
				this.typeOn = index
			},
			unitConfirm(res) {

				let ch = res.value[0]
				this.dataForm.unitName = ch.name;
				this.dataForm.unit = ch.id;
				this.unitShow = false;
				console.log('res', this.dataForm)
			},
			async submitMeth() {
				let d ={...this.dataForm};
				// console.log(d)
				d.contacts = this.contactList;
				let v = this.$util.customValidation(d, this.rules);
				if (!v) {
					return;
				}
				d.imaegs = d.imaegs.join(',')
				d.serviceCharacteristics = this.storeAdvantage.join('/')
				let res = null;
				if (this.editId) {
					res = await editSupple(d);
				} else {
					res = await addSupple(d);
				}
				console.log(res)
				if (res.code == 200) {
					this.$util.Tips({
						title: this.editId ? '编辑成功' : '添加成功'
					}, {
						tab: 2,
						url: '/pages/releases/mySupplyChain/mySupplyChain?index=' + this.categoryOn
					})
				} else {
					this.$util.Tips({
						title: this.editId ? '编辑失败' : '添加失败'
					})
				}
			},
			bindPickerChange(e) {
				this.dataForm.category = this.itemList[e.detail.value].id
				this.dataForm.categoryName = this.itemList[e.detail.value].name
			},
			getDetail(id) {
				let that = this;
				getSuppleDetail(id).then(res => {
					
					if (res.code == 200) {
						res.data.imaegs = res.data.imaegs ? res.data.imaegs.split(',') : []
						// this.advantages = this.advantageIds;
						// this.advantages = this.advantageIds;
						let c = this.itemList.filter(item => item.id == res.data.category);
						res.data.categoryName = c[0] ? c[0].name : '';
						// res.data.categoryName = [0]
						res.data.contacts =res.data.contacts? res.data.contacts.map(item => ({
							...item,
							username: item.contactName,
							phone: item.contactPhone
						})):[]
						this.contactList = res.data.contacts
						if(res.data.category){
							this.$emit("resetCategory",res.data.category)
						}
						this.dataForm = res.data
						this.chooseKeywordsInited();
					   console.log('ressUULLY', this.dataForm)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.nav-bg {
		background: #ffffff;
		padding: 18rpx 20rpx 36rpx;

		.item~.item {
			// margin-left: 48rpx;
		}

		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				background: #ffffff;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				// width: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				color: rgba(239, 39, 50, 1);
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}
</style>
